<script  setup>
import axios from 'axios'
import { ref } from 'vue'
const Users = ref('')
const currentPage = ref(1)

const handleCurrentChange = () => {
  axios.get('api/mycontroller9/mymethod9/' + currentPage.value).then((res) => {
    Users.value = res.data
    console.log(Users.value)
  })
}

</script>

<template>
 <div style="margin-top: 10px;display: flex;justify-content: center">
      <el-input
        placeholder="默认展示部分用户，可以通过用户名搜索用户..."
        prefix-icon="el-icon-search"
        v-model="keywords" style="width: 400px" size="small">
      </el-input>
      <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 3px" @click="searchClick">搜索
      </el-button>
  </div>
<div class="card">
  <el-row>
    <el-col
     v-for="(user) in Users"
      :span="5"
      :key="user.id"

    >
      <el-card>
<div class="head" >
  <div class="username">{{user.username}}</div>
  <div>
    <el-button
        style="float: left; padding: 3px 0;color: #ff0509" type="text"
                     @click="deleteUser(user.id)">删除
          </el-button>
  </div>

</div>
        <!-- <img src="User.userface" alt=""> -->
<div style="height: 200px;" class="content">

          <span>{{user.nickname}}</span>
        <span>{{user.email}}</span>
        <span>{{user.regTime}}</span>
</div>
      </el-card>
    </el-col>
  </el-row>
  </div>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

</template>

<style scoped>
.head{
  display: flex;

  border-bottom: 3px solid rgb(183, 181, 181);
  margin-bottom: 20px;
  padding: 5px;
}
.card{
  margin-top: 25px;
  justify-items: center;
}
.el-row{
  width: 800px;
  height: 300px;
}
.username{
  display: flex;
}
.button{
  display: flex;
}
</style>
